<%--
  Created by IntelliJ IDEA.
  User: Fullcy
  Date: 2019/8/1
  Time: 16:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.scau.ums.model.User" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.scau.ums.util.tools.IpAddress" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900"
          rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrapmin.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="css/font-awesomemin.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="css/slickmin.css">
    <!-- animate css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="css/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="css/jqueryuimin.css">
    <!-- main style css -->
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="css/upload-user-layui.css">

    <!-- JS
    ============================================ -->

    <!-- Modernizer JS -->
    <script src="js/modernizr-3.6.0min.js"></script>
    <!-- jQuery JS -->
    <script src="js/jquery-3.3.1min.js"></script>
    <!-- Popper JS -->
    <script src="js/poppermin.js"></script>
    <!-- Bootstrap JS -->
    <script src="js/bootstrapmin.js"></script>
    <!-- slick Slider JS -->
    <script src="js/slickmin.js"></script>
    <!-- Countdown JS -->
    <script src="js/countdownmin.js"></script>
    <!-- Nice Select JS -->
    <script src="js/nice-selectmin.js"></script>
    <!-- jquery UI JS -->
    <script src="js/jqueryuimin.js"></script>
    <!-- Image zoom JS -->
    <script src="js/image-zoommin.js"></script>
    <!-- image loaded js -->
    <script src="js/imagesloadedpkgdmin.js"></script>
    <!-- masonry  -->
    <script src="js/masonrypkgdmin.js"></script>
    <!-- mailchimp active js -->
    <script src="js/ajaxchimp.js"></script>
    <!-- contact form dynamic js -->
    <script src="js/ajax-mail.js"></script>
        <!-- Main JS -->
    <script src="js/main.js"></script>

    <style type="text/css">
          .table-div {
            text-align: center;
        }

          .table-div table {
            font-size: 16px;
            white-space: nowrap;
            table-layout: fixed;
            text-align: center;
            line-height: 20px;
        }

          .table-div table tr {
             border: dashed 1px #a59e9e;
             border-left: none;
             border-right: none;
        }

        .table-div table td {
            padding: 6px;
        }
    </style>

    <!--notification样式-->
    <style type="text/css">
        .notification {
            /*width: 360px;*/
            /*height: 110px;*/
            /*z-index: 9000;*/
            /*position: fixed;*/
            /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
            /*padding: 20px;*/
            /*margin: 0.5rem 0 1rem 0;*/
            /*border-radius: 2px;*/
            /*background-color: #fff;*/
        }

        .notification .dismiss {
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            position: absolute;
            background-color: #B8B8B8;
            border-radius: 50%;
        }

        .notification .illustration {
            margin-right: 20px;
            float: left;
        }

        .notification .illustration img {
            border-radius: 50%;
        }

        .notification .text .title {
            font-size: 18px;
            font-weight: bold;
        }

    </style>

    <!--notification.js样式-->
    <script>

        Notification = window.Notification || {};

        Notification = function () {

            'use strict';

            var number = 0;
            var incPosition = 0;

            var template = function (title, text, image, position) {
                incPosition = number * 120;
                number = number + 1;
                var textHtml = '<div class="text">' + text + '</div>';
                var titleHtml = (!title ? '' : '<div class="title">' + title + '</div>');
                var imageHtml = (!image ? '' : '<div class="illustration"><img src="' + image + '" width="70" height="70" /></div>');
                var style;
                switch (parseInt(position, 10)) {
                    case 1:
                        style = "top:" + incPosition + "px; left:20px;";
                        break;
                    case 2:
                        style = "top:" + incPosition + "px; right:20px;";
                        break;
                    case 3:
                        style = "bottom:" + incPosition + "px; right:20px;";
                        break;
                    case 4:
                        style = "bottom:" + incPosition + "px; left:20px;";
                        break;
                    default:
                        ;
                }
                return {
                    id: number,
                    content: '<div style="undefinedposition: ;position: fixed;top: 15px;z-index: 33;width: 360px;height: 85px;background: wheat;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)" class="notification notification-' + number + ' " style="' + style + '">' +
                        '<div class="dismiss">&#10006;</div>' +
                        imageHtml +
                        '<div class="text">' + titleHtml + textHtml + '</div>' +
                        '</div>'
                };
            };

            var hide = function (id) {
                $(document).find('.notification-' + id).remove();
                number = number - 1;
            };

            var create = function (title, text, image, animation, position, delay) {
                var notification = template(title, text, image, position);
                $(notification.content).addClass('animated ' + animation).appendTo('body');
                if (!delay) {
                    delay = 2;
                }
                setTimeout(function () {
                    hide(notification.id);
                }, 1000 * delay);
            };

            return {
                create: create
            };

        }();

    </script>
</head>

<body>
<header class="header-area">
    <!-- header 开始 -->
    <div class="main-header d-none d-lg-block">
        <!--顶部条开始-->
        <div class="header-top black-bg">
            <div class="container">
                <!--界面布局设计-->
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="top-left-navigation">
                            <ul class="nav align-items-center">
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-end">
                        <div class="header-social-link">
                        </div>
                        <ul class="user-info-block">
                            <!--登录开始-->
                            <%if (request.getSession().getAttribute("USER_NAME") == null) {%>
                            <li><a href="/login"><i class="fa fa-sign-in"></i> 登录</a></li>
                            <%} else {%>
                            <ul class="nav">
                                <!--登录开始-->
                                <li class="mini-cart-wrap">
                                    <a href="#" class="minicart-btn">
                                        <span class="fa fa-user-circle-o"></span>
                                        <% String username = (String) request.getSession().getAttribute("USER_NAME");
                                            out.print(username);%>
                                        <span id="notification" class="notification" style="top: -5px;
                                                      right: 40px;
                                                      position: absolute;
                                                      width: 18px;
                                                      height: 18px;
                                                      text-align: center;
                                                      line-height: 18px;
                                                      font-size: 10px;
                                                      color: #fff;
                                                      border-radius: 50%;
                                                      background-color: #87b106;"></span>
                                    </a>

                                    <!--websocket实时接收消息-->
                                    <script>
                                        $(function () {
                                            transferCircleNumber();
                                        })
                                        // var noticeSum=0;
                                        // $.ajax({
                                        //   url: "/receiveInfo",
                                        //   async:true,
                                        //   type: "GET",
                                        //   dataType:"json",
                                        //   success: function (res) {  //res是server端响应
                                        //     noticeSum++;
                                        //     console.log(res);
                                        //     if(res==0){
                                        //       document.getElementById("notification").style.display="none";
                                        //     }
                                        //     else{
                                        //       document.getElementById("notification").innerText=noticeSum.toString();
                                        //     }
                                        //   }
                                        // })
                                        // var noticeSum=0;
                                        // if(noticeSum==0){
                                        //   document.getElementById("notification").style.display="none";
                                        // }
                                        // $(function() {
                                        //   var websocket;
                                        //   if('WebSocket' in window) {
                                        //     console.log("此浏览器支持websocket");
                                        //     websocket = new WebSocket("ws://localhost:8080/websocket");
                                        //   } else if('MozWebSocket' in window) {
                                        //     alert("此浏览器只支持MozWebSocket");
                                        //   } else {
                                        //     alert("此浏览器只支持SockJS");
                                        //   }
                                        //   websocket.onopen = function(evnt) {
                                        //     console.log(evnt);
                                        //     $("#tou").html("链接服务器成功!")
                                        //   };
                                        //   websocket.onmessage = function(evnt) {
                                        //     noticeSum++;
                                        //     document.getElementById("notification").style.display="block";
                                        //     document.getElementById("notification").innerText=noticeSum.toString();
                                        //     alert(evnt);
                                        //   };
                                        //   websocket.onerror = function(evnt) {};
                                        //   websocket.onclose = function(evnt) {
                                        //     console.log("与服务器断开了链接!");
                                        //     $("#tou").html("与服务器断开了链接!")
                                        //   }
                                        //
                                        //   $('#close').bind('click', function() {
                                        //     websocket.close();
                                        //   });
                                        //
                                        //   $('#send').bind('click', function() {
                                        //     send();
                                        //   });
                                        //
                                        //   function send() {
                                        //     if(websocket != null) {
                                        //       var message = document.getElementById('message').value;
                                        //       console.log(message);
                                        //       websocket.send("#anyone#"+message);
                                        //     } else {
                                        //       alert('未与服务器链接.');
                                        //     }
                                        //   }
                                        // });



                                        var websocket = null;
                                        //判断当前浏览器是否支持WebSocket
                                        if ('WebSocket' in window) {
                                            websocket = new WebSocket("ws://<%=IpAddress.ipAddress%>:8080/websocket/<%=request.getSession().getAttribute("USER_ID")%>");
                                        }
                                        else {
                                            console.log('当前浏览器不支持 websocket')
                                        }

                                        //连接发生错误的回调方法
                                        websocket.onerror = function () {
                                            console.log("WebSocket连接发生错误");
                                        };


                                        //连接成功建立的回调方法
                                        websocket.onopen = function () {
                                            console.log("WebSocket连接成功"+<%=request.getSession().getAttribute("USER_ID")%>);
                                        }


                                        //接收到消息的回调方法
                                        websocket.onmessage = function (event) {
                                            // console.log(event.data);
                                            $("#flipInX").click();
                                            // alert("管理员给您发送了一条消息："+event.data);
                                            transferCircleNumber();

                                        }


                                        //连接关闭的回调方法
                                        websocket.onclose = function () {
                                            console.log("WebSocket连接关闭");
                                        }


                                        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                                        window.onbeforeunload = function () {
                                            closeWebSocket();
                                        }


                                        //关闭WebSocket连接
                                        function closeWebSocket() {
                                            websocket.close();
                                        }

                                    </script>
                                    <!--转换圆心数字-->
                                    <script>
                                        function transferCircleNumber() {
                                            $.ajax({
                                                type: "GET",
                                                url: "countMessage",
                                                dataType: "json",
                                                success: function (data) {
                                                    document.getElementById("notification").style.display = "block";
                                                    if (data == 0) {
                                                        document.getElementById("notification").style.display = "none";
                                                    }
                                                    document.getElementById("notification").innerText = data;
                                                    // noticeSum = data;
                                                },
                                                error: function () {
                                                    alert("ajax传送失败");
                                                }
                                            })
                                        }
                                    </script>

                                    <!--两个按钮开始-->
                                    <div class="cart-list-wrapper">
                                        <div class="minicart-button">
                                            <a href="/userEntrance"><i class="fa fa-user-plus"></i> 我的</a>
                                            <a href="/logout"><i class="fa fa-user-times"></i> 注销</a>
                                            <!--当管理员发消息时，会自动触发此按钮，相应的，会触发对应绑定的click事件，此按钮默认隐藏-->
                                            <button id="flipInX" class="notify btn" value="flipInX" style="display:none">flipInX</button>
                                            <script>
                                                var position=100;
                                                $("#flipInX").click(function (event) {
                                                    Notification.create(
                                                        // Title
                                                        "消息",
                                                        // Text
                                                        "您有一条新的消息",
                                                        // Illustration
                                                        "img/user.jpg",
                                                        // Effect
                                                        $(event.target).text(),
                                                        // Position
                                                        position
                                                    );
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <!--两个按钮结束-->
                                </li>
                                <!--登录结束-->
                            </ul>
                            <%}%>
                            <!--登录结束-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--顶部条结束-->

        <!-- 顶部中间开始 -->
        <div class="header-main-area black-soft sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <!-- logo展示开始 -->
                    <div class="col-auto">
                        <div class="logo">
                            <a href="/">
                                <img src="/img/2.jpg" style="margin-bottom:58px" alt="Brand Logo">
                            </a>
                        </div>
                    </div>
                    <!-- logo展示结束 -->

                    <!-- 顶部标签栏开始 -->
                    <div class="col-auto position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- 标签栏开始 -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li class="active"><a href="/">主页 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">信息服务 <i class="fa fa-angle-down"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="/getlist">失物招领 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="/new_suggestion">发表建议 <i
                                                        class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="/diyShowNews">新闻动态 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="#">更多 <i class="fa fa-align-center"></i></a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="/repairreport">报修服务 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">校园短信通<i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">联系我们</a></li>
                                    </ul>
                                </nav>
                                <!-- 标签栏结束 -->
                            </div>
                        </div>
                    </div>
                    <!-- 顶部标签栏结束 -->

                </div>
            </div>
        </div>
        <!-- 顶部中间结束 -->
    </div>
    <!-- header 结束 -->
</header>


<main>
    <script>
        //页面默认显示
        $(document).ready(function () {
            document.getElementById("btn2-1").click();
        });

        //时间格式化设置
        Date.prototype.format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1,                 //月份
                "d+": this.getDate(),                    //日
                "h+": this.getHours(),                   //小时
                "m+": this.getMinutes(),                 //分
                "s+": this.getSeconds(),                 //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds()             //毫秒
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }

        //新闻页面跳转判断
        function newsJumpCheck(sumPage) {
            var page = parseInt(document.getElementById("jumpPage").value);
            if (page < 1) {
                getNews(1);
            } else if (page <= sumPage) {
                getNews(page);
            } else {
                getNews(sumPage);
            }
        }

        //ajax动态请求
        function getNews(page) {
            $.ajax({
                url: "/getNewsList?curPage=" + page,
                contentType: "application/json;charset=UTF-8",
                type: "get",
                data: {},
                success: function (data) {
                    //清除原先内容
                    $(".content").empty()
                    var str = "";
                    //定义表列头
                    str +=
                        "共" + data.sumPage + "页<br/>" +
                        "<div class=\"myaccount-table table-responsive text-center\">" +
                        "<table class=\"table table-bordered\">" +
                        "<thead class=\"thead-light\">" +
                        "<tr>" +
                        "<td>编号</td>" +
                        "<td>新闻标题</td>" +
                        "<td>发布时间</td>" +
                        "</tr>" +
                        "</thead>";
                    var newsList = data.newsList;
                    //循环将显示内容用字符串拼接
                    for (var i = 0; i < newsList.length; i++) {
                        //拼接表格的行和列
                        str += "<tr><td>" + newsList[i].id + "</td><td><a href=\"#\" class=\"btn btn-link\" data-toggle=\"modal\" data-target='#quick_view"+newsList[i].id.toString()+"' style='color:green'>" + newsList[i].title + "</a></td>" +
                            "<td>" + new Date(newsList[i].date).format("yyyy-MM-dd hh:mm:ss") + "</td>" +
                            "</tr>"+
                            "\n" +
                            "<!-- 模态框开始 -->\n" +
                            "<div class=\"modal\" id='quick_view"+newsList[i].id.toString()+"'>\n" +
                            "  <div class=\"modal-dialog modal-lg modal-dialog-centered\" style=\"height: auto\">\n" +
                            "    <div class=\"modal-content\" style=\"height: auto\">\n" +
                            "      <div class=\"modal-header\">\n" +
                            "        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n" +
                            "      </div>\n" +
                            "      <div class=\"modal-body\" style=\"height:auto\">\n" +
                            "        <!-- 新闻描述开始 -->\n" +
                            "        <div class=\"product-details-inner\" style=\"height:auto\">\n" +
                            "          <div class=\"newz3\" style=\"height: auto\">\n" +
                            "            <div class=\"col-lg-7\" style=\"flex:none;max-width: none;height:auto\">\n" +
                            "              <div class=\"product-details-des\" style=\"height: auto\">\n" +
                            "                <h3 class=\"product-name\">"+newsList[i].title+"</h3>\n" +
                            "                <div class=\"ratings d-flex\">\n" +
                            "                </div>\n" +
                            "\n" +
                            "                  <p class=\"pro-desc\">"+newsList[i].content+"</p>\n" +
                            "              </div>\n" +
                            "            </div>\n" +
                            "          </div>\n" +
                            "        </div>\n" +
                            "        <!-- 新闻描述结束 -->\n" +
                            "      </div>\n" +
                            "    </div>\n" +
                            "  </div>\n" +
                            "</div>\n" +
                            "<!-- 模态框结束 -->";

                        //追加到table中
                    }
                    var lastPage;//上一页
                    var nextPage;//下一页
                    //对上、下页的范围限制
                    if ((page - 1) <= 1) {
                        lastPage = 1;
                    } else lastPage = page - 1;
                    if ((page + 1) >= data.sumPage) {
                        nextPage = data.sumPage;
                    } else nextPage = page + 1;

                    str += "</table></div>" +
                        "<div style='margin-left: 45px;margin-top: 15px;'>" +
                        "<div style='float: left;margin-right: 7%'><button style='cursor: pointer;' onclick='getNews(1,)'>首页</button></div>" +
                        "<div style='float: left;margin-right: 7%'><button style='cursor: pointer;' onclick='getNews(" + lastPage + ")'>上一页</button></div>" +
                        "<div style='float: left;margin-right: 7%'><button style='cursor: pointer;' onclick='getNews(" + page + ")'>当前第" + page + "页</button></div>" +
                        "<div style='float: left;margin-right: 7%'><button style='cursor: pointer;' onclick='getNews(" + nextPage + ")'>下一页</button></div>" +
                        "<div style='float: left;margin-right: 7%'><button style='cursor: pointer;' onclick='getNews(" + data.sumPage + ")'>尾页</button></div>" +
                        "<div style='float: left;margin-right: 3%'>跳至 <input id='jumpPage' type='text' style='width: 50px'/> 页</div>" +
                        "<div style='float: left;'><button id='stu-search-btn' onclick='newsJumpCheck(" + data.sumPage + ")'>跳转</button></div>" +
                        "</div>";
                    $(".content").append(str);
                },
                error: function (msg) {
                    alert("ajax连接异常：" + msg);
                }
            });
        }


    </script>

    <!-- 导航图片开始 -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="img/6.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">高校后勤综合信息管理平台</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/diyShowNews">新闻动态</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航图片结束 -->


    <!-- 新闻列表开始 -->
    <div class="my-account-wrapper section-padding">
        <div class="container">
            <div class="section-bg-color">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="myaccount-page-wrapper">
                            <div class="row">
                                <div class="col-lg-3 col-md-4">
                                    <div class="myaccount-tab-menu nav" role="tablist">
                                        <a id="btn1" href="#listUser" class="active" data-toggle="tab"><i
                                                class="fa fa-address-book-o "></i>
                                            新闻列表</a>
                                    </div>
                                </div>

                                <div class="col-lg-9 col-md-8">
                                    <div class="tab-content" id="myaccountContent">
                                        <!-- 开始 -->
                                        <div class="tab-pane fade show active" id="listUser" role="tabpanel">
                                            <div class="myaccount-content">
                                                <div class="myaccount-table table-responsive text-center">
                                                    <div class="myaccount-tab-menu nav" role="tablist"
                                                         style="-webkit-flex-direction:row">
                                                        <a id="btn2-1" href="#studentList"
                                                           onclick="getNews(1)"
                                                           data-toggle="tab"
                                                           style="width:180px;text-align:left;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(229, 229, 229)"><i
                                                                class="fa fa-comments-o"></i>
                                                            新闻列表</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 结束 -->
                                    </div>

                                    <!--开始-->
                                    <div class="content">

                                    </div>
                                    <!--结束-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新闻列表结束 -->

</main>

<!-- footer area start -->
<footer class="black-bg">
    <div class="footer-middle-area">
        <div class="container">
            <div class="row mtn-30">
                <div class="col-lg-6 col-sm-12">
                    <div class="address-block mt-30">
                        <div class="footer-logo">
                            <a href="#">
                                <img src="img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                        <address class="address-info d-flex align-items-center">
                            <i class="fa fa-map-marker"></i>
                            <p><span>ADDRESS : </span> 梦翔大厦</p>
                        </address>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-envelope"></i>
                        <p><span>EMAIL : </span><a href="#">xxxx@qq.com</a></p>
                    </address>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-phone"></i>
                        <p><span>PHONE : </span><a href="#">158xxxxx9442</a></p>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area text-center">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="payment-method-list">

                    </div>

                    <p class="copyright">
                        Copyright © www.xxx.com
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->

<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="/js/modernizr-3.6.0min.js"></script>
<!-- jQuery JS -->
<script src="/js/jquery-3.3.1min.js"></script>
<!-- Popper JS -->
<script src="/js/poppermin.js"></script>
<!-- Bootstrap JS -->
<script src="/js/bootstrapmin.js"></script>
<!-- slick Slider JS -->
<script src="/js/slickmin.js"></script>
<!-- Countdown JS -->
<script src="/js/countdownmin.js"></script>
<!-- Nice Select JS -->
<script src="/js/nice-selectmin.js"></script>
<!-- jquery UI JS -->
<script src="/js/jqueryuimin.js"></script>
<!-- Image zoom JS -->
<script src="/js/image-zoommin.js"></script>
<!-- image loaded js -->
<script src="/js/imagesloadedpkgdmin.js"></script>
<!-- masonry  -->
<script src="/js/masonrypkgdmin.js"></script>
<!-- mailchimp active js -->
<script src="/js/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="/js/ajax-mail.js"></script>
<!-- google map api -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
<!-- google map active js -->
<script src="/js/google-map.js"></script>
<!-- Main JS -->
<script src="/js/main.js"></script>
</body>

</html>
